import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

import './index.less'
import { connect } from 'react-redux'
import { loginAction } from '../../actions/users'
import { Redirect } from 'react-router-dom'

const mapStateToProps = state => ({
  isLogin: state.users.isLogin
})

const mapDispatchToProps = {
  loginAction: loginAction // 将 action 中的 loginAction 作为组件使用的属性映射
}

export default @connect(mapStateToProps, mapDispatchToProps) class Login extends Component {
  onFinish = values => {
    console.log('Received values of form: ', values)
    this.props.loginAction(values)
  }

  render() {
    return (
      this.props.isLogin
      ?
      <Redirect to="/admin" />
      :
      <div className="site-login">
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={this.onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
    
            <a className="login-form-forgot" href="/">
              忘记密码
            </a>
          </Form.Item>
    
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

// const mapStateToProps = state => ({
//   isLogin: state.users.isLogin
// })


// const mapDispatchToProps = {
//   loginAction: loginAction // 将 action 中的 loginAction 作为组件使用的属性映射
// }

// export default connect(mapStateToProps, mapDispatchToProps)(Login)
